<template>
  <div class="resetPassword">
    <div class="inner">
      <div class="title">
        个人设置
        <i @click="closeFn"></i>
      </div>
      <div class="content">
        <div class="top">
          <span v-if="header_pic!=null" class="img" :style="{backgroundImage: 'url('+ header_pic +')'}"></span>
          <span v-else class="img img-default"></span>
          <span class="btn" @click="upload">更换头像</span>
          <input ref="upload-file" @change="choose_verify_file" type="file" style="display: none" multiple>
        </div>
        <div class="row">
          <p class="title">联系电话</p>
          <p>{{this.$store.state.userInfo.phone}}</p>
        </div>
      </div>
    </div>
    <cropperImg :option="option" :show="isShowCaiQie" @callback="fileCallback"></cropperImg>
  </div>
</template>

<script>
import cropperImg from '@/components/tool/cropperImg';
  export default {
    name: "ResetPassword",
    components:{
      cropperImg
    },
    data() {
      return {
        header_pic: '',//头像
        password: '',
        newPassword: '',
         // 裁剪组件的基础配置option
        option: {
          img: '', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: 'png', // 裁剪生成图片的格式
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          // autoCropWidth: '230px', // 默认生成截图框宽度
          // autoCropHeight: '150px', // 默认生成截图框高度
          fixedBox: false, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [1, 1], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: false // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        },
        newPassword2: '',
        isShowCaiQie:false
      };
    },
    created() {
      this.header_pic = this.$store.state.userInfo.headImage;
      console.log(this.header_pic)
    },
    methods: {
      fileCallback(file){
        if(file == false){
          this.isShowCaiQie = false;
          return false;
        }
        var img = this.dataURLtoFile(file,'zz.png');
        let formdata = new FormData();
        formdata.append('userId', this.$store.state.userInfo.userId);//创建任务的人的id 指派人id
        formdata.append('photo', img, (img.name || '').intercept_characters());
        this.$http.post('user/user/updateHeadImage', formdata).then(res => {
          if (res.statusCode == 200) {
            this.header_pic = res.data;
            this.$store.commit('SET_USERINFO_HEAD', res.data);
          } else {
            this.$message.error(res.statusMsg);
          }
        });
        this.isShowCaiQie = false;

      },
      save() {

      },
      closeFn() {
        this.$emit("close");
      },
      upload() {
        this.$refs['upload-file'].click();
      },
      choose_verify_file() {
        let _this = this,
          upload_file = _this.$refs['upload-file'],
          file_list = upload_file.files;
        for (let item of file_list) {
          //判断文件大小
          // if (item.size > _this.upload_file_max_size) {
          //   _this.$message.error('文件：' + item.name + '太大了，请选择2M以下的图片重新上传');
          //   continue;
          // }
          if (item.type.indexOf('image') !== -1) {
            //文件类型为图片
            // _this.header_pic={
            //   'file': item,
            //   'url': window.URL.createObjectURL(item),
            //   'name': (item.name || '').intercept_characters()
            // }

            // 上传按钮   限制图片大小
            // const isLt5M = file.size / 1024 / 1024 < 5
            // if (!isLt5M) {
            //   this.$message.error('上传文件大小不能超过 5MB!')
            //   return false
            // }
            var url = URL.createObjectURL(item);
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(() => {
              this.option.img = url;
              this.isShowCaiQie = true;
            })

            // let formdata = new FormData();
            // formdata.append('userId', _this.$store.state.userInfo.userId);//创建任务的人的id 指派人id
            // formdata.append('photo', item, (item.name || '').intercept_characters());
            // _this.$http.post('user/user/updateHeadImage', formdata).then(res => {
            //   if (res.statusCode == 200) {
            //     _this.header_pic = res.data;
            //     _this.$store.commit('SET_USERINFO_HEAD', res.data);
            //   } else {
            //     _this.$message.error(res.statusMsg);
            //   }
            // });


          } else {
            _this.$message.error('请上传图片');
          }
        }
      }
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .resetPassword {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    .inner {
      width: 400px;
      height: 300px;
      border-radius: 6px;
      background-color: #ffffff;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      padding: 0 32px;

      > .title {
        color: #454A55;
        font-size: 16px;
        font-weight: bold;
        padding-top: 32px;
        padding-bottom: 32px;
        position: relative;

        i {
          background-size: 16px 17px;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          width: 16px;
          height: 17px;
          background-image: url("../../assets/img/close_icon.png");
          top: 20px;
          right: 0px;
          cursor: pointer;
        }
      }

      .content {
        > .top {
          height: 80px;
          position: relative;

          > .img {
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #DDDDDD;
            background-repeat: no-repeat;
            background-size: cover;
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          .img-default{
            background-image: url("../../assets/img/ic_my_head.png");
          }
          > .btn {
            position: absolute;
            left: 100px;
            bottom: 26px;
            width: 64px;
            height: 24px;
            line-height: 24px;
            border-radius: 4px;
            border: 1px solid #0755DB;
            color: #0755DB;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
          }
        }

        > .row {
          padding-top: 30px;

          p.title {
            padding-bottom: 17px;
            color: #96A2AA;
          }

          p {
            font-size: 14px;
            color: #323234;
          }

          > .row-input {
            overflow: hidden;
            margin-bottom: 14px;

            label {
              display: inline-block;
              width: 90px;
              padding: 0 15px;
              line-height: 32px;
              box-sizing: border-box;
              i{
                color: #0755DB;
              }
            }

            input {
              width: 240px;
              height: 32px;
              line-height: 32px;
              border: none;
              background-color: #F2F6F9;
              border-radius: 4px;
              text-indent: 10px;
            }
          }
        }
      }

      > .btn {
        position: absolute;
        width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        color: #ffffff;
        border-radius: 6px;
        right: 32px;
        bottom: 24px;
        background-color: #0755DB;
        cursor: pointer;
      }
    }
  }
</style>
